// 需求1：渲染学生列表（封装成函数）
function renderStudents() {
  axios({
    method: 'get',
    url: '/student/list'
  }).then(({data: res}) => {
    console.log(res)
    //渲染
    tbody.innerHTML = res.data.map(item =>
      `<tr>
        <th scope="row">${item.id}</th>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.sex}</td>
        <td>${item.group}</td>
        <td>${item.phone}</td>
        <td>${item.salary}</td>
        <td>${item.truesalary}</td>
        <td>${item.province+item.city+item.county}</td>
        <td>
          <button type="button" data-id="${item.id}" class="update btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#updateModal">修改</button>
          <button type="button" data-id="${item.id}" class="del btn btn-danger btn-sm">删除</button>
        </td>
      </tr>`
    ).join('')
  })
}
let tbody = document.querySelector('tbody')
// 调用
renderStudents()

// 需求2：删除学生信息 - 事件委托
tbody.addEventListener('click', function(e) {
  // 判断点击的是否删除按钮,如果类名没有del 就不要往下执行了
  if(!e.target.classList.contains('del')) return
  if(!confirm('是否确实删除?')) return
  // 获取自定义属性值id
  let {id} = e.target.dataset
  // console.log(id)
  // 发送ajax删除学生信息
  axios({
    method: 'delete',
    url: '/student/delete',
    params: { id }
  }).then( ({data: res}) => {
    if(res.code === 0) {
      console.log(res)
      // 删除成功提示
      toastr.success(res.message)
      // 重新渲染
      renderStudents()
    }
  })
})

// 需求3：省市区三级联动渲染
function setCity(id) {
  // 3.1 渲染省
  let select1 = document.querySelector(`#${id} [name=province]`)
  axios({
    method: 'get',
    url: '/geo/province'
  }).then(({data: res}) => {
    // console.log(res)
    //定义一个数组，设置默认值
    let arr = ['<option value="">--省--</option>']
    // 遍历数组，生成多个option，添加到数组中
    res.forEach(item => {
      arr.push(`<option value="${item}">${item}</option>`)
    })
    // 渲染
    select1.innerHTML = arr.join('')
  })
  // 3.2 渲染市（省份改变事件触发）
  let select2 = document.querySelector(`#${id} [name=city]`)
  select1.onchange = function() {
    // 省修改，县清空
    select3.innerHTML = '<option value="">--区/县--</option>'
    if(this.value == '') {
      // 清空 市 
      select2.innerHTML = '<option value="">--市--</option>'
      return toastr.error('必须传递省的名字')
    }
    // 发送ajax获取对应的市
    axios({
      method: 'get',
      url: '/geo/city',
      params: { pname: select1.value },
    }).then( ({data: res}) => {
      // console.log(res)
      // 渲染市
      let arr = ['<option value="">--市--</option>']
      // 遍历
      res.forEach(item => {
        arr.push(`<option value="${item}">${item}</option>`)
      })
      // 赋值
      select2.innerHTML = arr.join('')
    })
  }
  // 3.3 渲染区(县) - 需要市改变事件触发
  let select3 = document.querySelector((`#${id} [name=county]`))
  select2.onchange = function() {
    // 非空判断
    if(this.value == '') {
      // 清空 县
      select3.innerHTML = '<option value="">--区/县--</option>'
      return toastr.error('必须传递市的名字')
    }
    axios({
      method: 'get',
      url: '/geo/county',
      params: { 
        pname: select1.value,
        cname: select2.value
      },
    }).then( ({data: res}) => {
      // console.log(res)
        // 渲染区
        let arr = ['<option value="">--区/县--</option>']
        // 遍历
        res.forEach(item => {
          arr.push(`<option value="${item}">${item}</option>`)
        })
        // 赋值
        select3.innerHTML = arr.join('')
    })
  }
}
setCity('addModal')
setCity('updateModal')

// 需求4：添加学生信息
let addForm = document.querySelector('#addModal form')
addForm.addEventListener('submit', function(e) {
  e.preventDefault()
  axios({
    method: 'post',
    url: '/student/add',
    // 使用jq提供的$(this).serialize()，快速收集form表单数据
    data: $(this).serialize(),
  }).then( ({data: res}) => {
    console.log(res)
    if(res.code == 0) {
      // 成功提示
      toastr.success(res.message)
      // 关闭录入学员框和重新渲染
      document.querySelector('#addModal .btn-close').click()
      renderStudents()
      // 清空form表单
      addForm.reset()
    }
  })
})

// 需求5：点击修改按钮，渲染form表单对应值 - 事件委托
document.querySelector('tbody').onclick = function(e) {
  // 判断点击的是不是修改按钮,如果不是就取反，让代码不再往下执行
  if(!e.target.classList.contains('update')) return
  // 获取自定义属性id值
  let {id} = e.target.dataset
  axios({
    method: 'get',
    url: '/student/one',
    params: { id },
  }).then( ({data: res}) => {
    console.log(res)
    if(res.code == 0) {
      // 获取数据，渲染到对应表单的值
      document.querySelector('#updateModal [name=name]').value = res.data.name
      document.querySelector('#updateModal [name=age]').value = res.data.age
      document.querySelector('#updateModal [name=phone]').value = res.data.phone
      document.querySelector('#updateModal [name=salary]').value = res.data.salary
      document.querySelector('#updateModal [name=truesalary]').value = res.data.truesalary
      // 单选按钮： 性别
      let ipts = document.querySelectorAll('#updateModal [name=sex]')
      ipts.forEach(item => item.checked = res.data.sex == item.value)
      // 下拉菜单： 组 和 省
      document.querySelector('#updateModal [name=group]').value = res.data.group
      document.querySelector('#updateModal [name=province]').value = res.data.province
      // 市和县需要ajax渲染，（此处做了简化，先选省）
      document.querySelector('#updateModal [name=city]').innerHTML = `<option value="${res.data.city}">${res.data.city}</option>`
      document.querySelector('#updateModal [name=county]').innerHTML = `<option value="${res.data.county}">${res.data.county}</option>`
      // 为了方便修改用户信息，一般会用隐藏域装id属性
      document.querySelector('#updateModal [name=id]').value = res.data.id
      
    }
  })
}

// 需求6：修改学生信息
let updataForm = document.querySelector('#updateModal form')
updataForm.addEventListener('submit', function(e) {
  e.preventDefault()
  axios({
    method: 'put',
    url: '/student/update',
    // 传递参数：使用jq方法，获取表单值
    data: $(this).serialize(),
  }).then( ({data: res}) => {
    // console.log(res)
    if(res.code == 0) {
      // 删除成功的提示信息
      toastr.success(res.message)
      // 重新渲染
      renderStudents()
      //关闭弹出
      document.querySelector('#updateModal .btn-close').click()
    }
  })
})